<script setup>
import { ref, reactive, onMounted, nextTick } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { get, post } from '@/myaxios'

/**删除评论 */
const deleteComment = async (currentRow) => {
    ElMessageBox.confirm(
        `确定要删除此条评论数据么`,
        '注意',
        {
            confirmButtonText: '删除',
            cancelButtonText: '取消',
            type: 'error',
        }
    )
        .then(async () => {
            const editresp = await post("customerOrderComment/delete", { commentId: currentRow.commentId })
            if (editresp.data.code === 2010) {
                ElMessage.success(editresp.data.msg)
            } else {
                ElMessage.error(editresp.data.msg)
            }

            const resp = await post(`customerOrderComment/query`, { orderId: currentRow.orderId });
            if (resp.data.code === 2000) {
                serverTableList.tableData = resp.data.returnData;
            } else if (resp.data.code === 2001) {
                serverTableList.tableData = [];
            }

        })
        .catch(() => {
            console.log("取消删除");
        })
}

/**评论管理 */
const serverTableList = reactive({ tableData: [] })
const commentDrawer = ref(false)

const changeCommentSwitch = (row) => {
    ElMessageBox.confirm(
        `确认修改评论状态为[ ${row.commentStatus == 1 ? '正常' : '禁止'} ]`,
        '注意',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            let params = { commentId: row.commentId, commentStatus: row.commentStatus }
            operationData("customerOrderComment/editCommentStatus", params)
        })
        .catch(() => {
            row.commentStatus = row.commentStatus == 1 ? 0 : 1;
        })
}

const showComment = async (row) => {
    commentDrawer.value = true;

    const resp = await post(`customerOrderComment/query`, { orderId: row.orderId });
    if (resp.data.code === 2000) {
        serverTableList.tableData = resp.data.returnData;
    } else if (resp.data.code === 2001) {
        serverTableList.tableData = [];
    }
}

/**
 * 条件查询
 */
const queryForm = reactive({
    gameName: "",
    orderDatetime: "",
    orderPaymentCustomerName: "",
    orderServeCustomerName: "",
    orderStatus: ""
})

const onSubmit = () => {
    queryData(queryForm);
}
const onReset = () => {
    queryFormRef.value.resetFields();
    queryData({});
}

// pid下拉列表使用的动态数据
const optionsList = reactive({ optionsData: [] })

// 获得查询表单组件对象
const queryFormRef = ref()

/**
 * 分页组件
 */
// 分页组件参数对象
const pageInfo = reactive({
    pageData: {
        page: 1,
        pageSize: 10,
        total: 77
    }
})

// 页码改变
const handleCurrentChange = (val) => {
    pageInfo.pageData.page = val;
    let paramsObj = { ...pageInfo.pageData, ...queryForm };
    queryData(paramsObj);
}

// 每页显示记录改变
const handleSizeChange = (val) => {
    pageInfo.pageData.page = 1;
    pageInfo.pageData.pageSize = val;
    let paramsObj = { ...pageInfo.pageData, ...queryForm };
    queryData(paramsObj);
}

// table列表数据
const tableList = reactive({ tableData: [] })

/**
 * 公共函数
 */
// 查询公共函数
const queryData = (params) => {
    post("customerOrder/query", params)
        .then((resp) => {
            if (resp.data.code === 2000) {
                tableList.tableData = resp.data.returnData;
                pageInfo.pageData = resp.data.pageInfo;
            } else if (resp.data.code === 2001) {
                tableList.tableData = [];
                pageInfo.pageData = { page: 1, pageSize: 10, total: 0 }
            }
        })
        .catch((error) => {
            console.error('查询失败:', error)
        })
}

const querySelect = () => {
    post("/games/query", { page: 1, pageSize: 1000 })
        .then((resp) => {
            if (resp.data.code === 2000) {
                optionsList.optionsData = resp.data.returnData;
            }
        })
        .catch((error) => {
            console.error('查询游戏列表失败:', error)
        })
}

const operationData = (url, params) => {
    post(url, params)
        .then(resp => {
            if (resp.data.code === 2010) {
                ElMessage.success(resp.data.msg)
            } else if (resp.data.code === 2011) {
                ElMessage.error(resp.data.msg)
            }

            let paramsObj = { ...pageInfo.pageData, ...queryForm };
            queryData(paramsObj);
        })
        .catch(error => {
            console.error('操作失败:', error)
        })
}

onMounted(() => {
    queryData({})
    querySelect()
})
</script>

<template>
        <el-form ref="queryFormRef" :inline="true" :model="queryForm">
        <el-form-item label="游戏名称" prop="gameName">
            <!-- <el-input v-model="queryForm.gameName" placeholder="gameName" /> -->
            <el-select style="width: 220px;"
                v-model="queryForm.gameName"
                placeholder="选择游戏">
                <el-option v-for="options in optionsList.optionsData" :label="options.gameName" :value="options.gameName" />
            </el-select>    
        </el-form-item>
        <el-form-item label="下单日期" prop="orderDatetime">
            <el-date-picker
                v-model="queryForm.orderDatetime"
                type="date"
                placeholder="选择日期"
                value-format="YYYY-MM-DD"
            />
        </el-form-item>
        <el-form-item label="下单用户" prop="orderPaymentCustomerName">
            <el-input v-model="queryForm.orderPaymentCustomerName" placeholder="orderPaymentCustomerName" />
        </el-form-item>
        <el-form-item label="接单用户" prop="orderServeCustomerName">
            <el-input v-model="queryForm.orderServeCustomerName" placeholder="orderServeCustomerName" />
        </el-form-item>
        <el-form-item label="订单状态" prop="orderStatus">
            <!-- <el-input v-model="queryForm.orderStatus" placeholder="orderStatus" /> -->
            <el-select style="width: 220px;"
                v-model="queryForm.orderStatus"
                placeholder="选择状态">
                <el-option  label="下单" value="1" />
                <el-option  label="接单" value="2" />
                <el-option  label="结单" value="3" />
                <el-option  label="评论" value="4" />
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" plain @click="onSubmit">查询</el-button>
            <el-button type="primary" plain @click="onReset">重置</el-button>
        </el-form-item>
    </el-form>

    <el-table height="500px" ref="tableRef" :data="tableList.tableData" style="width: 100%">
        <el-table-column fixed prop="orderId" label="订单编号" width="80"></el-table-column>
        <el-table-column prop="orderDatetime" label="下单时间" width="180"></el-table-column>
        <el-table-column prop="orderStatus" label="订单状态" width="100">
            <!-- 1下单 2接单 3结单 4评论 -->
            <template #default="scope">
                <el-tag v-if="scope.row.orderStatus == 1" type="sucess">下单</el-tag>
                <el-tag v-if="scope.row.orderStatus == 2" type="warning">接单</el-tag>
                <el-tag v-if="scope.row.orderStatus == 3" type="info">结单</el-tag>
                <el-tag v-if="scope.row.orderStatus == 4" type="primary">评论</el-tag>
            </template>

        </el-table-column>
        <el-table-column prop="orderSkillId" label="技能编号" width="80"></el-table-column>
        <el-table-column prop="gameName" label="游戏名称" width="180"></el-table-column>
        <el-table-column prop="orderSkillNum" label="订单数量" width="80"></el-table-column>
        <el-table-column prop="orderSkillPrice" label="订单单价" width="80"></el-table-column>
        <el-table-column prop="orderTotalPrice" label="订单总价" width="80"></el-table-column>
        <el-table-column prop="orderPaymentCustomer" label="下单用户" width="180">
            <template #default="scope">
                <el-tag  type="primary">{{scope.row.orderPaymentCustomer}}-{{scope.row.orderPaymentCustomerName  }}</el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="orderServeCustomer" label="接单用户" width="180">
            <template #default="scope">
                <el-tag  type="success">{{scope.row.orderServeCustomer}}-{{scope.row.orderServeCustomerName  }}</el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="orderRemark" label="订单备注" width="180"></el-table-column>



        <el-table-column fixed="right" label="操作" width="180">
            <template #default="scope">
                <el-button type="primary" plain size="small" @click="showComment(scope.row)">订单评论</el-button>
            </template>
        </el-table-column>

    </el-table>

    <el-pagination v-model:current-page="pageInfo.pageData.page" v-model:page-size="pageInfo.pageData.pageSize"
        :page-sizes="[10, 20, 30]" layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.pageData.total"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />

  <!-- 评论抽屉 -->
  <el-drawer v-model="commentDrawer" title="订单评论" :direction="'btt'" size="70%">

    <!-- 			"commentDatetime": "2024-03-19 07:52:56",
			"commentDetail": "银色",
			"commentId": 614,
			"commentScore": 5,
			"commentStatus": 1,
			"orderId": 4,
			"orderPaymentCustomer": 22,
			"orderServeCustomer": 3001 -->
    <el-table :data="serverTableList.tableData" style="width: 100%">
      <el-table-column fixed prop="commentId" label="评论编号" width="80" />

      <el-table-column prop="commentDatetime" label="评论时间">
        <template #default="scope">
          <el-tag>{{ scope.row.commentDatetime }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="commentScore" label="评论分数">
        <template #default="scope">
            <el-rate
                v-model="scope.row.commentScore"
                disabled
                show-score
                text-color="#ff9900"
                score-template="{value}分"
            />
        </template>
      </el-table-column>
      <el-table-column prop="commentStatus" label="评论状态">
        <template #default="scope">
            <!--  0屏蔽 1正常 -->
          <!-- <el-tag v-if="scope.row.commentStatus == 1" type="success">正常</el-tag>
          <el-tag v-if="scope.row.commentStatus == 0" type="info">屏蔽</el-tag> -->
          <el-switch v-model="scope.row.commentStatus" inline-prompt active-text="正常" inactive-text="屏蔽"
                    :active-value="1" :inactive-value="0"
                    style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                    @change="changeCommentSwitch(scope.row)" />
        </template>
      </el-table-column>
      <el-table-column prop="commentDetail" label="评论详情">
        <template #default="scope">
          <el-tag>{{ scope.row.commentDetail }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="primary" plain @click="deleteComment(scope.row)">删除</el-button>
        </template>
      </el-table-column>

    </el-table>
  </el-drawer>

        
</template>

<style scoped>

</style>

